<template>
	<ul>
		<li v-for="(item, index) in arr" :key="index">
			{{ item }}
		</li>
		<!-- <li>美女</li>
		<li>程序猿</li> -->
	</ul>
	<button @click='fun'>走一走</button>
</template>

<script setup>
import { reactive } from 'vue'
const arr = reactive(['帅哥', '美女', '程序猿'])
// 改变数组的元素顺序：第一个元素去到最后
const fun = () => {
	// 1.临时保存首元素
	let temp = arr[0]
	// 2.删除首元素
	arr.splice(0, 1)  // 从索引为0的位置开始删，删1个元素
	// 3.将临时变量加进数组的末尾
	arr.push(temp)
}
</script>

<style scoped>
	
</style>